'use client'
import React from "react"
import SlideShow from "@/app/components/Content/Material/SlideShow";

const Material = () => {
  const [imgList] = React.useState<{
    url: string,
    title: string,
    text: string,
  }[]>([
    {
      url: '/images/material/1.jpg',
      title: '桃花季的藏东',
      text: '#样片日记-西藏  自然风景'
    }, {
      url: '/images/material/2.jpg',
      title: '日本关东',
      text: '#样片日记-日本  人文&自然风景'
    }, {
      url: '/images/material/3.jpg',
      title: '阿拉斯加',
      text: '#样片日记-阿拉斯加  自然风景&延时摄影'
    }, {
      url: '/images/material/4.jpg',
      title: '开车去罗马',
      text: '城市人文&显微摄影'
    },
  ])
  return <div className="px-4  mb-12">
    <header className="flex justify-between items-center ">
      <div>
        <p className="md:text-sm lg:text-xl  text-[#646464] font-[600]">MATERIAL</p>
        <p className="text-[#24252C] font-[600] text-2xl">飓风素材库</p>
      </div>

      <div className="md:hidden xs:hidden lg:flex felx cursor-pointer">
        <span>更多素材</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
             className="size-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
      </div>

    </header>
    <div className=" mt-12 grid xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 grid-cols-4 gap-[20px]">
      {/*轮播图*/}
     <SlideShow />

      {imgList && imgList.map((item, index) => {
        return <div key={index} className="w-full h-full overflow-hidden">
          <img src={item.url} alt="" className="hover:scale-105 transition"/>
          <div className="mt-4 text-xs rounded-2xl   cursor-pointer">
            <div className="flex items-center">
              <div className="block  border rounded-lg  w-9 h-5 leading-normal text-center  border-[#646464]">节目</div>
              <div className="mx-2 font-bold text-base">{item.title}</div>
              <div className="block font-bold border rounded-lg text-center w-9 h-5 leading-normal  border-[#646464]">4K
              </div>
            </div>
            <div className="pl-1 mt-2 text-[#646464]">{item.text}</div>
          </div>
        </div>
      })}


    </div>
  </div>
}
export default Material